<template>
  <div class="table-progress">
    <el-progress :percentage="newValue" :color="newColor" />
    <div v-if="list?.length" class="table-progress-icon">
      <el-tooltip
        v-for="(item, index) in list"
        :key="index"
        :content="item.label"
        effect="dark"
        placement="right"
      >
        <img :src="item.src" alt="" @click.stop="emits('itemEvent', { prop: item.prop, row })" />
      </el-tooltip>
    </div>
  </div>
</template>
<script setup>
import _ from 'lodash';
const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: '',
  },
  customColors: {
    default: () => [
      { color: '#55D7FE', percentage: 30 },
      { color: '#34A6F1', percentage: 60 },
      { color: '#127BBC', percentage: 100 },
    ],
  },
  iconFormat: {
    type: [Array, Function],
    default: () => [],
  },
  row: {
    type: Object,
    default: () => {},
  },
});

const emits = defineEmits(['itemEvent']);

const newValue = computed(() => {
  let val = props.modelValue;
  if (!val) return 0;
  val = val / 1;
  if (val === NaN) return 0;
  // if (val > 100) return 100;
  return val;
});

const newColor = computed(() => {
  let val = props.modelValue;
  return val > 100 ? '#ED8978' : props.customColors;
});

const list = computed(() => {
  let format = props.iconFormat;
  if (format && _.isFunction(format)) {
    return format(props.row);
  } else {
    return [];
  }
});
</script>
<style lang="scss" scoped>
.table-progress {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  :deep() {
    .el-progress {
      flex: 1;
      padding: 0 8px;
    }
    .el-progress-bar__outer {
      height: 8px !important;
      border-radius: 4px;
      background: #ebebeb;
    }
    .el-progress__text {
      min-width: auto;
    }
    .el-progress__text {
      font-size: 12px !important;
      color: #606266;
    }
  }

  .table-progress-icon {
    height: 100%;
    border-left: 1px solid #dfe6ec;
    padding: 0 8px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    img {
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss">
.table-progress-percentage {
  padding: 0 !important;
  .cell {
    height: 29px !important;
  }
}
</style>
